<template>
  <div class="statistics-content statistics-1">
    <div class="grid grid-left">
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道注册人数" style="margin-top: 10px"></BlockItem>
        <!--        <div class="tab-block">-->
        <!--          <div :class="chart1Active==1?'active':''" @click="chart1Active=1" class="tab">月</div>-->
        <!--          <div :class="chart1Active==2?'active':''" @click="chart1Active=2" class="tab">周</div>-->
        <!--          <div :class="chart1Active==3?'active':''" @click="chart1Active=3" class="tab">日</div>-->
        <!--        </div>-->
        <div class="chart" id="chart1"></div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道访问人数" style="margin-top: 10px"></BlockItem>
        <!--        <div class="tab-block">-->
        <!--          <div :class="chart2Active==1?'active':''" @click="chart2Active=1" class="tab">月</div>-->
        <!--          <div :class="chart2Active==2?'active':''" @click="chart2Active=2" class="tab">周</div>-->
        <!--          <div :class="chart2Active==3?'active':''" @click="chart2Active=3" class="tab">日</div>-->
        <!--        </div>-->
        <div class="chart" id="chart2"></div>
      </div>
    </div>
    <div class="grid grid-center">
      <div class="map-block" style="position: relative">
        <div class="number-block" style="position: relative;z-index: 1">
          <NumberItem class="number-item" v-for="item in numberData" :key="item.id" :name="item.name"
            :number="item.number" :color="item.color" :icon="item.icon"
            @click.native="oncloseDialog1(item.id, item.name)">
          </NumberItem>
        </div>
        <!--        <CoverOne v-if="closeDialog" :id="fatherId" :closeDialog="close" :countList="countList"></CoverOne>-->
        <div id="map"></div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道访问量趋势" style="margin-top: 10px"></BlockItem>
        <div class="chart" id="chart3"></div>
      </div>
    </div>
    <div class="grid grid-right">
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道注册人数、注册企业占比" style="margin-top: 10px"></BlockItem>
        <div class="tab-block">
          <div class="tab1" @click="derive">
            <img src="/static/export.png" alt="" class="export">导出
          </div>
        </div>
        <div class="info-item">
          <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
            <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
              <div id="scrollItemBox">
          <div class="info-list" v-for="(item, index) in list" :key="item.id">
            <div style="display: flex;align-items: center;">
              <div class="sort">0{{ index + 1 }}</div>
              <div class="name">{{ item.areaName }}</div>
              <div class="line"></div>

              <div class="percentage-item">
                <div class="percentage">{{ item.zhucerenshuzhanbi }}</div>
                <div class="percentage">注册人数占比</div>
              </div>
              <div class="line"></div>
              <div class="percentage-item">
                <div class="percentage">{{ item.zhuceqiyezhanbi }}</div>
                <div class="percentage">注册企业占比</div>
              </div>
            </div>
            <div class="count1" v-if="index == 0">{{ item.zongfen }}</div>
            <div class="count2" v-else-if="index == 1">{{ item.zongfen }}</div>
            <div class="count3" v-else-if="index == 2">{{ item.zongfen }}</div>
            <div class="count" v-else>{{ item.zongfen }}</div>
          </div>
              </div>
              <div v-html="copyHtml"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道岗位总数统计" style="margin-top: 10px"></BlockItem>
        <!--        <div class="tab-block">-->
        <!--          <div :class="chart5Active==1?'active':''" @click="chart5Active=1" class="tab">月</div>-->
        <!--          <div :class="chart5Active==2?'active':''" @click="chart5Active=2" class="tab">周</div>-->
        <!--          <div :class="chart5Active==3?'active':''" @click="chart5Active=3" class="tab">日</div>-->
        <!--        </div>-->
        <div class="chart" id="chart5"></div>
      </div>
    </div>
    <Cover4 v-if="closeDialog1" :id="fatherId" :type="fairActive" :closeDialog="close" :name="name"></Cover4>
    <CoverCom4 v-if="closeDialog3" :id="fatherId" :closeDialog3="close3" :title="title"></CoverCom4>
    <CoverJob4 v-if="closeDialog2" :id="fatherId" :closeDialog2="close2" :title="title"></CoverJob4>
    <CoverJob5 v-if="closeDialog4" :id="fatherId" :closeDialog4="close4" :title="title"></CoverJob5>
    <Modal v-if="showMore" :name="this.name" :title="title" height="400px" width="1200px"
           @closeModal="showMore = false">
      <MapCount :title="title" :countList="countList"></MapCount>

      <template>
        <div class="cover-bottom">
          <el-table :data="tableData" style="width: 100%;">

            <el-table-column label="总注册人数" prop="regCount">

            </el-table-column>
            <el-table-column label="总访问人数" prop="browseCount" width="240">
            </el-table-column>
            <el-table-column label="企业注册数" prop="companyCount" width="360">

            </el-table-column>
            <el-table-column label="岗位总数" prop="positionCount" width="200">

            </el-table-column>

          </el-table>
        </div>

      </template>

    </Modal>
  </div>
</template>

<script>
import Cover4 from "@/components/Cover/Cover-4.vue";
import CoverCom4 from "@/components/Cover/CoverCom-4.vue";
import CoverJob4 from "@/components/Cover/CoverJob-4.vue";
import CoverJob5 from "@/components/Cover/CoverJob-5.vue";
import NumberItem from "@/components/NumbeItem/NumberItem.vue";
import {browserPeoTownStreet, getExport, operationalDataApi, regPeoTownStreet} from "@/api/statistics-3";
import BlockItem from "@/components/BlockItem/BlockItem";
import Modal from "@/components/Modal/Modal";
import MapCount from "@/components/MapCount/MapCount";
import CoverOne from "@/components/Cover/CoverOne.vue";
import {createFile} from "@/utils/utils";
import {accessTrendsData, getRegistrationRatioApi, queryStreetInfo} from "@/api/statistics4";

export default {
  name: "Statistics4",
  components: {
    MapCount, NumberItem, BlockItem, Modal, CoverOne,
    Cover4,
    CoverCom4,
    CoverJob4,
    CoverJob5,
  },
  data() {
    return {
      closeDialog1: false,
      closeDialog3: false,
      closeDialog2: false,
      closeDialog4: false,
      fairActive: 1,
      fatherId: 0,
      title: '',
      moreType: 1,
      showMore: false,
      chart1Active: 1,
      chart2Active: 1,
      chart3Active: 1,
      chart4Active: 1,
      chart5Active: 1,
      countList: [],
      numberData: [
        { id: 2, color: ['#5c6aff', '#4a29d8'], name: '总注册人数', icon: 'icon-caishouzhongliang', number: 3 },
        { id: 3, color: ['#30cbf7', '#1997e1'], name: '总访问人数', icon: 'icon-caishouzhongliang', number: 51 },
        { id: 4, color: ['#12f1b8', '#0db5e6'], name: '企业注册数', icon: 'icon-caishouzhongliang', number: 1 },
        { id: 5, color: ['#f7c759', '#fb838f'], name: '岗位总数', icon: 'icon-huoche', number: 0 },
        { id: 6, color: ['#A27DFD', '#8354FB'], name: '匹配成功数', icon: 'icon-huoche', number: 1 },
      ],
      tableData: [{
        regCount: 0,
        browseCount: 0,
        companyCount: 0,
        positionCount: 0
      }],
      regPeoTownStreetNameData: [],  //乡镇信息
      regPeoTownStreetData: [],
      browserPeoTownStreetName: [],
      browserPeoTownStreetNameData: [],
      copyHtml: '', //复制多一份防止滚动到后面出现空白
      scrollTop: 0, //列表滚动高度    }
      list: [{
        id: 1,
        areaName: '柳湖镇',
        zhucerenshuzhanbi: '100%',
        zhuceqiyezhanbi: '100%',
        zongfen: 100.0,
      }, {
        id: 2,
        areaName: '西湖乡',
        zhucerenshuzhanbi: '100%',
        zhuceqiyezhanbi: '100%',
        zongfen: 100.0,
      }, {
        id: 3,
        areaName: '渊泉镇',
        zhucerenshuzhanbi: '96.3%',
        zhuceqiyezhanbi: '100%',
        zongfen: 98.0,
      }, {
        id: 4,
        areaName: '布隆吉乡',
        zhucerenshuzhanbi: '93%',
        zhuceqiyezhanbi: '100%',
        zongfen: 96.0,
      }, {
        id: 5,
        areaName: '河东乡',
        zhucerenshuzhanbi: '85%',
        zhuceqiyezhanbi: '100%',
        zongfen: 94.0,
      }, {
        id: 6,
        areaName: '瓜州乡',
        zhucerenshuzhanbi: '84%',
        zhuceqiyezhanbi: '100%',
        zongfen: 92.0,

      },{
        id: 7,
        areaName: '广至藏族乡',
        zhucerenshuzhanbi: '84%',
        zhuceqiyezhanbi: '100%',
        zongfen: 92.0,

      },{
        id: 8,
        areaName: '双塔乡',
        zhucerenshuzhanbi: '83%',
        zhuceqiyezhanbi: '100%',
        zongfen: 92.0,
      },{
        id: 9,
        areaName: '沙河回族乡',
        zhucerenshuzhanbi: '84%',
        zhuceqiyezhanbi: '99%',
        zongfen: 91.0,
      },{
        id: 10,
        areaName: '七墩回族乡东乡族乡',
        zhucerenshuzhanbi: '84%',
        zhuceqiyezhanbi: '99%',
        zongfen: 91.0,

      },{
        id: 11,
        areaName: '腰站子东乡族乡',
        zhucerenshuzhanbi: '83%',
        zhuceqiyezhanbi: '95%',
        zongfen: 90.0,

      },{
        id: 12,
        areaName: '腰站子东乡族乡',
        zhucerenshuzhanbi: '83%',
        zhuceqiyezhanbi: '95%',
        zongfen: 90.0,
      },{
        id: 13,
        areaName: '三道沟乡',
        zhucerenshuzhanbi: '83%',
        zhuceqiyezhanbi: '95%',
        zongfen: 90.0,

      },{
        id: 14,
        areaName: '锁阳城镇',
        zhucerenshuzhanbi: '83%',
        zhuceqiyezhanbi: '95%',
        zongfen: 90.0,

      },{
        id: 15,
        areaName: '南岔镇',
        zhucerenshuzhanbi: '83%',
        zhuceqiyezhanbi: '95%',
        zongfen: 90.0,

      },{
        id: 16,
        areaName: '国营小宛农场',
        zhucerenshuzhanbi: '83%',
        zhuceqiyezhanbi: '95%',
        zongfen: 90.0,

      },{
        id: 16,
        areaName: '梁湖乡',
        zhucerenshuzhanbi: '83%',
        zhuceqiyezhanbi: '95%',
        zongfen: 90.0,

      },]
    }
  },
  methods: {
    oncloseDialog1(e, name) {
      this.type = e
      // this.closeDialog1 = true
      if (this.type == 2) {
        this.closeDialog1 = true
        this.fatherId = e
        this.fairActive = e
        this.name = name
      }
      if (this.type == 3) {
        this.closeDialog1 = false
      }
      if (this.type == 4) {
        this.closeDialog3 = true
        this.fatherId = e
        this.title = name
      }
      if (this.type == 5) {
        this.closeDialog2 = true
        this.fatherId = e
        this.title = '岗位总数'
      }
      if (this.type == 6) {
        this.closeDialog4 = true
        this.fatherId = e
        this.title = '匹配成功数'
      }
    },
    close3() {
      this.closeDialog3 = false
    },
    close2() {
      this.closeDialog2 = false
    },
    close() {
      this.closeDialog1 = false
    },
    close4() {
      this.closeDialog4 = false
    },
    derive() {
      this.$confirm('确定导出当前数据吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getExport().then((res) => {
          if (!createFile(res, '推广应用情况统计表')) {
            this.$message.error('未知的文件格式');
          }
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

    getDetail() {
      getRegistrationRatioApi().then((res) => {
        if (res.code === 200) {
          this.list = res.data
        }
      })
    },
    // getCount() {
    //   getSelectCount().then((res) => {
    //     if (res.code === 200) {
    //       this.numberData[0].number = res.data.customerCount
    //       this.numberData[1].number = res.data.browseCount
    //       this.numberData[2].number = res.data.enterpriseCount
    //       this.numberData[3].number = res.data.jobCount
    //       this.numberData[4].number = res.data.deliveryCount
    //     }
    //   })
    // },
    getCount() {
      operationalDataApi().then((res) => {
        if (res.code === 200) {
          this.numberData[0].number = res.data.allReg
          this.numberData[1].number = res.data.allBrowse
          this.numberData[2].number = res.data.allCompany
          this.numberData[3].number = res.data.allJob
          this.numberData[4].number = res.data.allSuccess
        }
      });
    },
    mEnter() {
      clearInterval(this.timer);
    },
    // 鼠标移出继续滚动
    mLeave() {
      this.startScroll()
    },
    initScroll() {
      this.$nextTick(() => {
        this.startScroll()
      })
    },
    // 开始滚动
    startScroll() {
      this.timer = setInterval(this.scroll, 35);
    },
    // 滚动处理方法
    scroll() {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = document.getElementById("scrollItemBox").offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },

    htmlCopy()
    {
      this.$nextTick(() => {
        this.copyHtml = document.getElementById("scrollItemBox").innerHTML
      })
    },
    initChart1() {
      let charts = this.$echarts.init(document.getElementById('chart1'));

      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        grid: {
          top: 20,
          left: 60,
          right: 10,
          bottom: 40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff',
              fontSize: 14
            }
          },
        },
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: false,
            xAxisIndex: 0,
            startValue: 0,
            endValue: 4,
          },
        ],
        series: [
          {
            data: [],
            // data: data,
            type: 'bar',
            barWidth: 17,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#ccc',
                    fontSize: 14
                  }
                },
                barBorderRadius: [15, 15, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#f7f28e'
                }, {
                  offset: 1,
                  color: '#3ee3a9'
                }])
              }
            }
          }
        ]
      }
      // getSelectCount().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     this.countList = data;
      //     option.series[0].data=data.registerCounts;
      charts.hideLoading();
      regPeoTownStreet().then((res) => {
        if (res.code === 200) {
          for (let i = 0; i < res.data.length; i++) {
            this.regPeoTownStreetNameData.push(res.data[i].name);
            this.regPeoTownStreetData.push(res.data[i].count);
          }
          option.series[0].data = this.regPeoTownStreetData
          option.xAxis.data = this.regPeoTownStreetNameData
          charts.setOption(option)
        }
      });
      setInterval(() => {
        if (option.dataZoom[0].endValue == option.xAxis.data.length - 1) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue =
              option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue =
              option.dataZoom[0].startValue + 1
        }
        charts.setOption(option)
      }, 3000);

      // }
      // })
    },
    initChart2() {
      let charts = this.$echarts.init(document.getElementById('chart2'));

      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        grid: {
          top: 20,
          left: 60,
          right: 10,
          bottom: 40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff',
              fontSize: 14
            }
          },
        },
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: false,
            xAxisIndex: 0,
            startValue: 0,
            endValue: 4,
          },
        ],
        series: [
          {
            // data: getNum(7,40000,15000),
            data: [],
            type: 'bar',
            barWidth: 17,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#ccc',
                    fontSize: 14
                  }
                },
                barBorderRadius: [15, 15, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#fb848f'
                }, {
                  offset: 1,
                  color: '#f7c659'
                }])
              }
            }
          }
        ]
      }
      // getSelectCount().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data=data.accessCounts;
      charts.hideLoading();

      browserPeoTownStreet().then((res) => {
        if (res.code === 200) {

          for (let i = 0; i < res.data.length; i++) {

            this.browserPeoTownStreetNameData.push(res.data[i].count);
            this.browserPeoTownStreetName.push(res.data[i].name);

          }
          option.series[0].data = this.browserPeoTownStreetNameData
          option.xAxis.data = this.browserPeoTownStreetName
          charts.setOption(option)
        }
      })
      setInterval(() => {
        if (option.dataZoom[0].endValue == option.xAxis.data.length - 1) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue =
              option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue =
              option.dataZoom[0].startValue + 1
        }
        charts.setOption(option)
      }, 3000);


      // }
      // })
    },
    initChart3() {
      let charts = this.$echarts.init(document.getElementById('chart3'));
      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        legend: {
          textStyle: {
            color: '#fff'
          },
          right: 10,
          top: 0
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            // rotate:30,
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        grid: {
          top: 20,
          left: 50,
          right: 10,
          bottom: 40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff',
              fontSize: 14
            }
          },
        },
        series: [
          // {
          //   // data: getNum(12,3000,2500),
          //   data: [0, 1, 0, 0, 0, 0, 2, 1, 3, 3, 5, 6, 7, 3, 5, 2, 5, 5, 2, 2, 3, 1, 5, 0, 0, 0, 0, 0, 0],
          //   type: 'line',
          //   name: '宁远镇',
          //   smooth: true,
          //   showSymbol: false,
          //   symbol: 'circle',
          // }
          // , {
          //   // data: getNum(12,2700,2200),
          //   data: [0, 1, 0, 0, 0, 0, 2, 1, 3, 3, 5, 6, 3, 3, 5, 2, 5, 5, 2, 2, 3, 1, 5, 3, 0, 0, 5, 10,],
          //
          //   name: '巉口镇',
          //   type: 'line',
          //   showSymbol: false,
          //   symbol: 'circle',
          //   smooth: true,
          // },
          // {
          //   // data: getNum(12,2600,2100),
          //   data: [1, 11, 5, 0, 0, 0, 2, 1, 3, 3, 7, 2, 3, 9, 5, 2, 5, 8, 2, 2, 3, 8, 5, 3, 0, 0, 5, 2,],
          //
          //   name: '杏园乡',
          //   type: 'line',
          //   showSymbol: false,
          //   symbol: 'circle',
          //   smooth: true,
          // },
          // {
          //   // data: getNum(12,2300,1750),
          //   data: [1, 11, 5, 0, 0, 0, 2, 1, 3, 3, 7, 2, 3, 9, 5, 2, 5, 8, 2, 2, 3, 8, 5, 3, 0, 0, 5, 2,],
          //
          //   name: '高峰乡',
          //   type: 'line',
          //   showSymbol: false,
          //   symbol: 'circle',
          //   smooth: true,
          // },
          // {
          //   // data: getNum(12,2400,1800),
          //   data: [1, 11, 5, 0, 0, 0, 2, 1, 3, 3, 7, 2, 3, 9, 5, 2, 5, 8, 2, 2, 3, 8, 5, 3, 0, 0, 5, 2,],
          //
          //   name: '符家川镇',
          //   type: 'line',
          //   showSymbol: false,
          //   symbol: 'circle',
          //   smooth: true,
          // },
          // {
          //   // data: getNum(12,1400,900),
          //   data: [1, 7, 5, 0, 0, 0, 2, 1, 3, 3, 7, 9, 3, 9, 5, 2, 5, 7, 2, 2, 3, 5, 5, 3, 3, 5, 2,],
          //
          //
          //   name: '中华路街道',
          //   type: 'line',
          //   showSymbol: false,
          //   symbol: 'circle',
          //   smooth: true,
          // },
          // {
          //   // data: getNum(12,1300,900),
          //   data: [3, 6, 5, 0, 10, 0, 2, 1, 3, 5, 7, 2, 3, 9, 15, 2, 5, 8, 2, 2, 3, 8, 8, 3, 0, 0, 5, 2,],
          //
          //   name: '永定路街道',
          //   type: 'line',
          //   showSymbol: false,
          //   symbol: 'circle',
          //   smooth: true,
          //   barCategoryGap: '30%',
          //   barGap: '100%',
          // }
        ]
      }
      // getSelectTrendOfVisits().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data=data[0];
      //     option.series[1].data=data[1];
      //     option.series[4].data=data[2];
      //     option.series[3].data=data[3];
      //     option.series[2].data=data[4];
      //     option.series[5].data=data[5];
      //     option.series[6].data=data[6];
      charts.hideLoading();
      // charts.setOption(option)

      accessTrendsData().then((res) => {
        if (res.code === 200) {
          var list=[];

          for (let i = 0; i < res.data.length; i++) {
            let obj={
              'type':'line',
              'smooth':true,
              'showSymbol':false,
              'symbol':'circle',
              'data':res.data[i].data,
              'name':res.data[i].name
            };
            list.push(obj);
          }
          option.series=list;
          charts.setOption(option)
        }
      })


      // }
      // })

    },
    initChart5() {
      let charts = this.$echarts.init(document.getElementById('chart5'));
      let data = ['柳湖镇', '西湖乡', '渊泉镇', '布隆吉乡', '河东乡', '瓜州乡', '广至藏族乡', '双塔乡', '沙河回族乡', '七墩回族乡东乡族乡', '腰站子东乡族乡','三道沟乡','锁阳城镇','南岔镇','国营小宛农场','梁湖乡'];
      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        xAxis: {
          type: 'category',
          data: data,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        grid: {
          top: 20,
          left: 60,
          right: 10,
          bottom: 40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff',
              fontSize: 14
            }
          },
        },
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: false,
            xAxisIndex: 0,
            startValue: 0,
            endValue: 6,
          },
        ],
        series: [
          {
            // data: getNum(7,8000,3000),
            data: [51, 52, 18, 53, 57, 26, 22, 31, 19, 30, 51, 52, 18, 53, 57, 26, 22, 31, 19, 30, 22, 45],
            type: 'bar',
            barWidth: 17,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#ccc',
                    fontSize: 14
                  }
                },
                barBorderRadius: [15, 15, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#0db5e6'
                }, {
                  offset: 1,
                  color: '#12f0b8'
                }])
              }
            }
          }
        ]
      }
      // getSelectCount().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data=data.publishCounts;

      charts.hideLoading();
      charts.setOption(option)

      setInterval(() => {
        if (option.dataZoom[0].endValue == data.length - 1) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue =
              option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue =
              option.dataZoom[0].startValue + 1
        }
        charts.setOption(option)
      }, 3000);

      // }
      // })
    },
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/dh_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          // visualMap: {
          //   left: 'right',
          //   top: 'bottom',
          //   max:1000,
          //   inRange: {
          //     color: [
          //       'rgba(17,74,112,0.2)',
          //       '#46a9ff',
          //     ]
          //   },
          //   textStyle: {
          //     color: "#fff"
          //   },
          //   calculable: true
          // },
          xAxis: {
            axisLine: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false }
          },
          yAxis: {
            axisLine: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false }
          },
          series: [
            {
              map: "jqsMap",
              center: [95.73910737300008,
                39.90226184200003],
              type: 'map',
              top: 250,
              data: [],
              zoom: 1, //当前视角的缩放比例
              roam: true, //是否开启平游或缩放
              scaleLimit: { //滚轮缩放的极限控制
                min: 1,
                max: 100
              },
              width: 450,
              label: {
                show: true,
                fontSize: "12",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "12",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select: {
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "12",
                  color: "#fff"
                }
              }
            }
          ]
        }
        myCharts.on('click', (e) => {

          if (e.componentSubType == 'map') {
            this.title = e.name

            queryStreetInfo(this.title).then((res) => {
              if (res.code === 200) {
                this.tableData[0].regCount = res.data.regCount;
                this.tableData[0].browseCount = res.data.browseCount;
                this.tableData[0].companyCount = res.data.companyCount;
                this.tableData[0].positionCount = res.data.positionCount;
              }
            })


            this.moreType = 2;
            this.showMore = true;
          }
        })
        myCharts.setOption(option)
      })
    },

  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.initMap();
    this.initChart1()
    this.initChart2()
    this.initChart3()
    this.initChart5()
    this.getCount()
    this.initScroll()
    this.htmlCopy()
    // this.regPeoTownStreet()
    // this.browserPeoTownStreet()
    // this.getCount()
    // this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 2px solid #05548A;


.cover-bottom {



  width: 100%;
  height: calc(100% - 127px);
  overflow: hidden;

  ::v-deep {
    .el-table th.el-table__cell {
      background-color: rgba(72, 75, 147, 0.5);
      text-align: center;
      color: #fff;
    }

    .el-table tr {
      background-color: #0A1456;
    }

    .el-table tbody tr:hover>td {
            background-color:unset !important //修改成自己想要的颜色即可
        }

    .el-table .el-table__cell {
      background-color: #0A1456;
      border-bottom: 1px solid #394276;
      text-align: center;
    }

    .el-table .cell {
      color: #fff;
    }
  }
}



.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 140px);
  padding: 0 10px;

  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    //box-shadow: $boxshadow;
    border-radius: 10px;
    background: #0A1456;

    .tab-block {
      position: absolute;
      top: 17px;
      right: 20px;
      display: flex;
      align-items: center;
      height: 30px;
      z-index: 3;

      .tab:first-child {
        border-radius: 5px 0 0 5px;
      }

      .tab:last-child {
        border-radius: 0 5px 5px 0;
      }

      .tab1 {
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #46A9FF;
        font-size: 14px;
        border-radius: 30px;

        .export {
          width: 12px;
          margin-right: 5px;
        }
      }

      .tab {
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #46a9ff;
        font-size: 14px;

      }

      .tab.active {
        background: #46a9ff;
      }
    }
  }
}

.statistics-content {
  display: flex;
  flex-direction: row;

  .grid {
    height: 100%;
  }

  .grid.grid-left,
  .grid.grid-right {
    width: calc(100%/4);

    .info-item {
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;

      // overflow: hidden;
      .info-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #025A8B;
        margin-bottom: 12px;

        .sort {
          color: #ffffff;
          margin-left: 10px;
          font-size: 16px;
          width: 50px;
          height: 100%;
          background: url("/static/u6817.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .name {
          color: #ffffff;
          font-size: 15px;
          width: 60px;
          margin-right: 13px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .rise {
          width: 16px;
          height: 18px;
        }

        .line {
          color: #ffffff;
          width: 2px;
          height: 16px;
          border-radius: 10px;
          background-image: linear-gradient(#115F8D, #fff, #115F8D);
          margin: 0 10px;
        }

        .percentage-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 2px;

          .percentage {
            color: #ffffff;
            font-size: 9px;
          }
        }

        .count {
          color: #ffffff;
          width: 52px;
          height: 100%;
          background-image: url("/static/top3.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .count1 {
          color: #ffffff;
          width: 50px;
          height: 100%;
          background-image: url("/static/top4.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .count2 {
          color: #ffffff;
          width: 50px;
          height: 100%;
          background-image: url("/static/top1.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .count3 {
          color: #ffffff;
          width: 50px;
          height: 100%;
          background-image: url("/static/top2.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

      }
    }
  }

  .grid.grid-center {
    width: calc(100%/2);
    padding: 0 20px;

    .statistics-block {
      width: 100%;
      height: calc(100%/3 - 20px);
      margin-top: 20px;
    }
  }

  .statistics-block {
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 20px;

    .chart {
      width: 100%;
      height: calc(100% - 30px);
    }
  }

  .statistics-block:last-child {
    margin-bottom: 0;
  }

  .map-block {
    width: 100%;
    height: calc(100%/3*2);
    position: relative;

    #map {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

    .number-block {
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 50px;

      .number-item {
        width: calc((100% - 90px)/4);
        margin-right: 30px;
      }

      .number-item:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
<style lang="scss" scoped>


.scroll_parent_box {
  height: 380px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;
}

.scroll_list {
  overflow: hidden;
  transition: all 0ms ease-in 0s
}

.scroll_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
</style>
